import React, { useState, useEffect } from 'react';
import 'antd/dist/antd.css'
import '../css/index.scss'
import Add from '../add'
import Edit from '../edit'
import See from '../see'
import Classification from '../classification'
import { Table, Button, Select, Space, Modal, Form, Input,message } from 'antd';
import axios from '../../../../../http/index'
import { ExclamationCircleOutlined } from '@ant-design/icons';

export default function Forms() {
    
    // 表格数据
    const [datas, usedatas] = useState([])
    // 表格的数据请求
    const seedata = () => {
        axios({
            method: "GET",
            url: '/system/invitation/invitationmanagement/queryHelpCenter',
            params: {
                currentPage: 1,
                pageSize: 999,
            }
        })
            .then((res) => {
                console.log(res);
                let datas = res.data.data
                datas = datas.filter((item) => item.dynamic === 1)
                for (let i = 0; i < datas.length; i++) {
                    datas[i].key = datas[i].id
                }
                usedatas([...datas])
                console.log('ads', datas);
            })
            .catch((err) => {
                console.log(err);
            })
    }
    useEffect(() => {
        // axios({
        //     method: "GET",
        //     url: '/system/invitation/invitationmanagement/updatePublishHelp',
        // })
        //     .then((res) => {
        //         console.log('所有分类',res);
        //     })
        //     .catch((err) => {
        //         console.log(err);
        //     })
        seedata()
    }, []);

    // 表格
    const columns = [
        {
            title: '编号',
            dataIndex: 'helpcenter_number',
            key: 'helpcenter_number',
            align: 'center',
            width: 120,
        },
        {
            title: '标题',
            dataIndex: 'title',
            key: 'title',
            align: 'center',
            width: 120,
        },
        {
            title: '分类',
            dataIndex: 'elpcenter_show',
            key: 'elpcenter_show',
            align: 'center',
            width: 120,
            render(text){
                return text === 1 ? '普通问题' : '售后问题'
            }
        },
        {
            title: '是否显示',
            dataIndex: 'dynamic',
            key: 'dynamic',
            align: 'center',
            width: 120,
            render(text){
                return text === 1 ? '是' : '否'
            }
        },
        {
            title: '发布时间',
            dataIndex: 'release_time',
            key: 'release_time',
            align: 'center',
            width: 120,
        },
        {
            title: '查看',
            dataIndex: 'see',
            key: 'see',
            align: 'center',
            width: 100,
            render(text){
                return text === 0 ? '是' : '否'
            }
        },
        {
            title: '操作',
            dataIndex: 'id',
            key: 'id',
            align: 'center',
            width: 200,
            render: text => <div><Space><Button size="small" onClick={() => see(text)}>查看</Button><Button size="small" onClick={() => edit(text)}>编辑</Button><Button size="small" type="dashed" danger onClick={() => dels(text)}>删除</Button></Space></div>,
        },
    ];
    const [seedatas,setseedatas] = useState({})
    // 查看
    const see = (text) => {
        console.log(text);
        let a = datas.filter((item) => item.id === text)
        setseedatas(() => a[0])
        setVisible3(true)
    }
    // 传给编辑弹窗的方法
    const edits = ()  => {
        setVisible4(false)
    }
    // 编辑
    const edit = (text) => {
        console.log(text);
        let a = datas.filter((item) => item.id === text)
        setseedatas(() => a[0])
        setVisible4(true)
    }
    // 删除
    const { confirm } = Modal;
    const dels = (text) => {
        axios({
            method: "GET",
            url: '/system/invitation/invitationmanagement/deleteHelpCenter',
            params: {
                id:String(text),
            }
        })
            .then((res) => {
                console.log(123,res);
                    confirm({
                      title: '真的确认删除吗?',
                      icon: <ExclamationCircleOutlined />,
                      content: '删除之后将无法恢复!',
                      okText: '确认',
                      okType: 'danger',
                      cancelText: '取消',
                      onOk() {
                        console.log('OK');
                        seedata()
                        if(res.data.code === 200){
                            message.success('删除成功');
                        }else{
                            message.error('删除出错');
                        }
                      },
                      onCancel() {
                        console.log('Cancel');
                      },
                    });
            })
            .catch((err) => {
                console.log(err);
                message.error('删除出错');
            })

    }
    // 搜索框
    const [da,setda] = useState({})
    const ada = () => {
        console.log(da);
        axios({
            method: "GET",
            url: '/system/invitation/invitationmanagement/updateDynamicQuery',
            params: {
               ...da
            }
        })
            .then((res) => {
                console.log(res);
                message.success('搜索成功');
            })
            .catch((err) => {
                console.log(err);
                message.error('搜索失败');
            })
    }
    const couponName = (e) => {
        if(e.target.value){
        setda({...da,title:e.target.value})
            console.log(e.target.value);
            ada()
        }
        seedata()
        message.error('暂无数据');

        console.log(da);
    }
    const gender = (e) => {
        setda({...da,classification:e})
        ada()
        console.log(e);
    }
    // 排序
    const sort = (e) => {
        if(e === '1'){
            axios({
                method: "GET",
                url: '/system/coupon/couponmanagement/queryUseThresholdFaceValue',
                params:{
                    face_value:'1',
                    total_circulation :'',
                }
            })
                .then((res) => {
                    usedatas([...res.data.data])
                    console.log('时间排序',res);
                    message.success('排序成功');
                })
                .catch((err) => {
                    console.log(err);
                })
        }else{
            axios({
                method: "GET",
                url: '/system/coupon/couponmanagement/queryUseThresholdFaceValue',
                params:{
                    face_value:'',
                    total_circulation :'1',
                }
            })
                .then((res) => {
                    usedatas([...res.data.data])
                    console.log('时间排序',res);
                    message.success('排序成功');
                })
                .catch((err) => {
                    console.log(err);
                    message.error('排序失败');
                })
        }
       
    }
    // 添加弹窗
    const [visible, setVisible] = useState(false)
   
      // 传给添加弹窗的方法
      const close1 = () => {
        setVisible(false)
    }
    // 分类管理
    const [visible2, setVisible2] = useState(false)
    
    // 传给分类管理的方法
    const close2 = () => {
        setVisible2(false)
    }
    // 编辑弹窗
    const [visible4, setVisible4] = useState(false)
    // 查看
    const [visible3, setVisible3] = useState(false)

    // 表格选择框
    const state = {
        selectedRowKeys: [], 
        loading: false,
      };

    const onSelectChange = selectedRowKeys => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    
    };

    const { loading, selectedRowKeys } = state;
    const rowSelection = {
      selectedRowKeys,
      onChange: onSelectChange,
    };
    
    return (
        <div>
            <div className="boders">
                <Form
                    layout="inline"
                >
                    <Form.Item className="bg">
                        <span className="text">筛选查询</span>
                    </Form.Item>
                    <Form.Item label="帮助标题" className="box22">
                        <Input placeholder="请输入帮助标题" onBlur={couponName} />
                    </Form.Item>
                    <Form.Item label="帮助分类" className="box22">
                        <Select placeholder="请选择帮助分类" onChange={gender} getPopupContainer={triggerNode => triggerNode.parentNode}>
                            <Select.Option value="1">普通问题</Select.Option>
                            <Select.Option value="2">金融问题</Select.Option>
                            <Select.Option value="3">售后问题</Select.Option>
                        </Select>
                    </Form.Item>
                </Form>
            </div>
            <div className="from">
                <div className="bg">
                    <span className="text">数据列表</span>

                    <div className="right">
                        <Button onClick={() => setVisible(true)}>发布帮助</Button>
                        <Button onClick={() => setVisible2(true)}>分类管理</Button>
                        <Select placeholder="请选择排序方式" style={{width:150}} onChange={sort} getPopupContainer={triggerNode => triggerNode.parentNode}>
                            <Select.Option value="1">常见问题</Select.Option>
                            <Select.Option value="2">金融问题</Select.Option>
                            <Select.Option value="3">售后问题</Select.Option>
                        </Select>
                    </div>
                </div>

                <Table bordered rowSelection= 'checkbox ' columns={columns} dataSource={datas} />

                <Modal
                    getContainer={false}
                    title="发布帮助"
                    centered
                    visible={visible}
                    onOk={() => setVisible(false)}
                    onCancel={() => setVisible(false)}
                    width={800}
                    footer={null}
                >
                    <Add close1={close1} seedata={seedata}/>
                </Modal>

                <Modal
                    getContainer={false}
                    title="分类管理"
                    centered
                    visible={visible2}
                    onOk={() => setVisible2(false)}
                    onCancel={() => setVisible2(false)}
                    width={800}
                    footer={null}
                >
                    <Classification seedatas={seedatas} close2={close2} seedata={seedata}/>
                </Modal>

                <Modal
                    getContainer={false}
                    title="查看详情"
                    centered
                    visible={visible3}
                    onOk={() => setVisible3(false)}
                    onCancel={() => setVisible3(false)}
                    width={600}
                    footer={null}
                >
                    <See seedatas={seedatas}/>
                </Modal>
                <Modal
                    getContainer={false}
                    title="编辑问题"
                    centered
                    visible={visible4}
                    onOk={() => setVisible4(false)}
                    onCancel={() => setVisible4(false)}
                    width={600}
                    footer={null}
                >
                    <Edit seedatas={seedatas} edits={edits}/>
                </Modal>

            </div>
        </div>
    )
}
